| 【前端实践系列之十六 】Echarts柱状图背景的实现的两种方法 | 您所在的位置：网站首页 › echart 柱状图圆角 › 【前端实践系列之十六 】Echarts柱状图背景的实现的两种方法 |
【前端实践系列之十六 】Echarts柱状图背景的实现的两种方法
|
这是我参与更文挑战的第23天，活动详情查看： 更文挑战 ! 👽 概论Echarts中的各种小技巧实在是太多了，前几期里也陆陆续续提到了一些： 【前端实践系列之十四】Echarts地图圆形背景及阴影实现 【前端实践系列之四】vue项目中使用Echarts绘制热力地图 【前端实践系列之三】避开各种坑！小程序中按需引入Echarts5绘制图表。 今天继续为大家介绍一个比较实用的：柱状图背景的实现。柱状图背景的实现方法有两种，比较常用且简单的是第一种：配置background属性，但还有一些特殊需求会碰到第二种：利用barGap属性位移叠加。 👽 方法一：配置background属性这种方法必要简单，主要用于实现每列背景长度一致的情况。关键属性是series-bar-showBackground。背景样式可以通过 backgroundStyle自定义配置。但这一方法的缺陷在于各列背景的高度是一致的，没法直接改变。 具体配置如下（如下配置可在echarts在线编辑器运行）： option = { grid: { left: "10%", right: 0, top: 30, bottom: 30, containLable: true, }, tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, }, xAxis: { type: "category", data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", ], }, yAxis: { type: "value", splitLine: { show: false, }, }, series: [ { data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130], type: "bar", name: "留存", stack: "用户", showBackground: true, emphasis: { focus: "series", }, barWidth: 9, itemStyle: { color: 'blue', borderRadius: 4.5, }, }, ], };不同于第一种方法，barGap属性调整的其实是柱状图中每列柱子之间的距离。该属性接收一个百分比字符串作为参数，但神奇的在于：可以通过设置barGap：-100%来达到柱子叠加的情况。也就是利用另一根具有数值的柱子来作为背景。这就使得通过设置不同的数值可以达到不同的背景高度，也是该方法的灵活之处。 具体配置如下（如下配置可在echarts在线编辑器运行）： option = { grid: { left: "10%", right: 0, top: 30, bottom: 30, containLable: true, }, tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, }, xAxis: { type: "category", data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", ], }, yAxis: { type: "value", splitLine: { show: false, }, }, series: [ {//背景柱 data: [150, 200, 180, 180, 90, 130, 130, 190, 90, 90, 150, 160], type: "bar", emphasis: { focus: "series", }, barWidth: 9, barGap:'-100%', silent:true,//务必同时设置静默属性，以使背景柱不响应任何操作 itemStyle: { color: 'rgb(240,240,240)', borderRadius: 4.5, }, }, { data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130], type: "bar", emphasis: { focus: "series", }, barWidth: 9, itemStyle: { color: 'blue', borderRadius: 4.5, }, }, ], };铁汁们，你学会了吗？ |
【本文地址】
公司简介
联系我们